<template>
  <div class="buy">
	<header-bar :text="title" :left="left"></header-bar>
	<div class="buy-header">
		买入{{list.coinType}}
	</div>
	<div class="buy-content">
		<div class="buy-item" style="padding-top: 25px;">
			<input :placeholder="placeholder" type="number"  v-model="quantity" />
		</div>
		<div class="buy-item buy-tool">
			<span>余额{{money}}</span>
			<span class="go-buy" @click="gopay()">去充币</span>
		</div>
	</div>
	<!-- <div class="getitme">
		<mt-cell
		@click.native="handShow"
			title="到期后"
			 is-link
			value="自动买入下一期">
		</mt-cell>
	</div> -->
	<div class="explain">
		锁定期<span class="day">{{list.dayType}}天</span>，{{getTime}}到期 预期获得收益{{getyMoney}} {{list.coinType}}
	</div>
	<div class="detail_xy">
		<input type="checkbox" id="check" v-model="checkbox" /> 购买者表示同意<router-link to="/entrust">《委托管理协议》</router-link>  
		<label for="check"></label>
	</div>
	<div  class="getBtn" @click="postmoney">确认赚币</div>
	<Code :flag="flag" @close="close" @changePwd='changePwd' @ok="successOk" ref="code"></Code>
	<getmoney @ok="ok"></getmoney>
	<confirm1 @ok="okBtn" @canle='canle' :OptionData="optionData"></confirm1>
  </div>
</template>
<script>
import headerBar from "./main/header";
import { Header } from "mint-ui";
import getmoney from "./main/getmoney";
import { mapMutations } from "vuex";
import util from "../assets/js/util.js";
import { mapState } from "vuex";
import Code from "./main/code";
import { Popup, Toast, MessageBox } from "mint-ui";
import confirm1 from "./main/confirm1";
// import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Buy",
  data() {
    return {
		msg: "",
		id: "",
		title: "赚币",
		left: {
			status: true
		},
		checkbox: true,
		list: {},
		money: 0, //余额
		flag: false,
		pwd: "",
		quantity: "",
		obj: {
			BTC: 0.1,
			EOS: 100,
			USDT: 500,
			ETH: 1
		},
		placeholder: "",
		optionData: {
			title: "您的BTC余额不足，请充值再理币",
			cancle: "充币",
			ok: "不充币"
		}
    };
  },
  computed: {
    ...mapState(["pageInfo"]),
    getTime() {
      return util.time.getNowTime(this.list.endTime / 1000);
    },
    getyMoney() {
      let res = "";
      let value =
        this.quantity * this.list.profit / 100 * (this.list.dayType / 365);
      value = value.toString();
      if (value) {
        let str = value.toString().slice(value.toString().indexOf(".") + 1);
        // console.log(value.substring(0,value.indexOf('.')+1))
        if (str.length > 8) {
          //小数大于8 个返回8个
          str = str.substring(0, 8);
          res = value.substring(0, value.indexOf(".") + 1) + str;
        } else {
          res = value.substring(0, value.indexOf(".") + 1) + str;
        }
      }
      // console.log(res);
      //this.quantity * this.list.profit / 100 / (this.list.dayType / 365)
      return res || 0;
    }
  },
  methods: {
    ...mapMutations(["SHOWPOP", "HIDEPOP", "SHOWCONFIRM", "HIDCONFIRM"]),
    okBtn() {
		this.gopay();
	},
    canle() {
		// console.log(2);
	},
    handShow() {
      this.SHOWPOP();
    },
    ok() {},
    close() {
      this.flag = false;
    },
    changePwd(pwd) {
      this.pwd = pwd;
    },
    successOk() {
      let parm = {
        userId: this.pageInfo.userinfo.id,
        productId: this.$route.query.id,
        quantity: this.quantity,
        payPwd: this.pwd.join("")
      };
      this.$ajaxPost("purchase", parm).then(res => {
        this.$refs.code.password = [];
        if (res.code == 200) {
          this.$router.push({
            path: "buySuccess",
            query: {
              name: this.list.name,
              id: this.list.id
            }
          });
        } else {
          Toast({
            message: res.msg,
            position: "bottom",
            duration: 1000
          });
        }
      });
    },
    postmoney() {
      
      if (this.quantity > this.money) {
        this.SHOWCONFIRM();
        Toast({
          message: "余额不足",
          position: "bottom",
          duration: 1000
        });
        return false;
      }
      if (this.quantity < this.list.quantity) {
        Toast({
          message: "最低" + this.list.quantity + "起投",
          position: "bottom",
          duration: 1000
        });
        return false;
      }

      if (!this.checkbox) {
        Toast({
          message: "请同意协议",
          position: "bottom",
          duration: 1000
        });
        return false;
      }
      if (this.pageInfo.userinfo.statusPay == 1) {
        this.password = [];
        MessageBox.confirm("您还没有交易密码，去设置交易密码？").then(
          action => {
            this.$router.push({
              path: "/pay?phone=" + this.pageInfo.userinfo.mobilephone
            });
          }
        );
        return false;
      }
      this.flag = true;
    },
    gopay() {
      this.$router.push({
        path: "/recharge",
        query: {
          iconType: this.list.coinType
        }
      });
    },
    initInfo() {
      this.id = this.$route.query.id;
      let para = {
        id: this.id
      };
      this.$ajaxGet("productDetail", para).then(res => {
        this.list = res.data;
        this.time = "";
        this.placeholder = this.list.quantity + "币起投";
        //this.obj[this.list.coinType]+'币起投'
        // let timer = setInterval(() => {
        //   // console.log(util.getEndTime(this.list.endTime))
        //   this.time = util.getEndTime(this.list.endTime);
        //   if (this.time == "活动已结束") {
        //     clearInterval(timer);
        //   }
        // }, 1000);
        // this.lineVal =
        //   (this.list.totalAmountView - this.list.surplusAmountView) /
        //   this.list.totalAmountView *
        //   100;
        // this.cote = (
        //   this.list.totalAmountView - this.list.surplusAmountView
        // ).toFixed(2);
        this.initMoney();
      });
    },
    initMoney() {
      for (var i in this.pageInfo.userinfo.coinData) {
        if (this.list.coinType == i) {
          this.money = this.pageInfo.userinfo.coinData[i].value;
        }
      }
    }
  },
  components: {
    getmoney,
    headerBar,
    Code,
    confirm1
  },
  mounted() {
    this.$store.dispatch("getUserInfo");
    //   console.log(this.$store.dispatch('getUserInfo'))
  },
  created() {
    this.initInfo();
  },
  watch: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/buy.css");
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #575757;
  opacity: 0.5332;
  z-index: 2000;
}
.detail_xy input[type="checkbox"]:checked::before {
  color: white;
  background: #f2f2f2;
  /* background-image: url("/static/img/dui.png"); */
  background-position: -1px -3px;
  position: absolute;
  width: 6px;
  top: 1px;
  left: 3px;

  height: 10px;
  border: 2px solid #908989;
  border-style: none solid solid none;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#check {
  overflow: hidden;
}
</style>
